---
title: gluestack-ui LinearGradient | Installation, Usage, and API

description: A LinearGradient component is a reusable graphical element that helps create linear gradients as background or styling effects within UI elements. A linear gradient is a gradual transition between two or more colors, creating a smooth progression of color changes along a straight line.

pageTitle: LinearGradient

pageDescription: A LinearGradient component is a reusable graphical element that helps create linear gradients as background or styling effects within UI elements. A linear gradient is a gradual transition between two or more colors, creating a smooth progression of color changes along a straight line.

showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="with-nativewind/Guides/Recipes/LinearGradient" />

import { Tabs, CollapsibleCode } from '@gluestack/design-system';
import GradientImage from '../../../extra-components/nativewind/GradientImage';

This is an illustration of **Linear Gradient** component in `App.tsx` file.

<GradientImage/>

```jsx
import "./global.css";
import React, { useState } from "react";
import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input";
import { SafeAreaView } from "@/components/ui/safe-area-view";
import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
import { LinearGradient } from "@/components/ui/linear-gradient";
import { Heading } from "@/components/ui/heading";
import { Text } from "@/components/ui/text";
import { Center } from "@/components/ui/center";
import { Mail } from "lucide-react-native";

export default function App() {
  const [colorMode, setColorMode] = useState<"dark" | "light">("light");
  return (
    <SafeAreaView className="flex-1 justify-center items-center">
      <GluestackUIProvider mode={colorMode}>
        <Center className="rounded-xl bg-background-0 p-8 m-6 web:max-w-[400px]">
          <Heading size="xl">Stay up to date</Heading>
          <Text className="text-center leading-[22px] my-2">
            Subscribe to our newsletter for the latest news and product updates.
          </Text>

          <Input
            variant="outline"
            size="md"
            isDisabled={false}
            isInvalid={false}
            isReadOnly={false}
            className="w-full rounded-full my-3"
          >
            <InputField placeholder="abc@example.com" />
            <InputSlot className="pr-3">
              <InputIcon
                as={Mail}
                color={colorMode === "light" ? "#525252" : "#DBDBDC"}
              />
            </InputSlot>
          </Input>

          <LinearGradient
            className="w-full rounded-full items-center py-2"
            colors={["#8637CF", "#0F55A1"]}
            start={[0, 1]}
            end={[1, 0]}
          >
            <Text className="text-white font-semibold">Subscribe</Text>
          </LinearGradient>
        </Center>
      </GluestackUIProvider>
    </SafeAreaView>
  );
}
```

<br />

## Installation

<Tabs value="expo" type="section">
  <Tabs.TabList>
      <Tabs.Tab value="expo">
        <Tabs.TabTitle>Expo Linear Gradient</Tabs.TabTitle>
      </Tabs.Tab>
     <Tabs.Tab value="rn">
        <Tabs.TabTitle>React Native Linear Gradient</Tabs.TabTitle>
     </Tabs.Tab>
  </Tabs.TabList>
  <Tabs.TabPanels>
    <Tabs.TabPanel value="expo">
<>

### Step 1: Install the following dependencies:
```bash
npx expo install expo-linear-gradient
```

### Step 2: Copy and paste the following code into your project.
<CollapsibleCode>

```jsx 
%%-- File: guides/recipes/linear-gradient/expo-linear-gradient.tsx --%% 
```
</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
    </Tabs.TabPanel>
    <Tabs.TabPanel value="rn"> 
<>

### Step 1: Install the following dependencies:
```bash
npm i react-native-linear-gradient
```

### Step 2: Copy and paste the following code into your project.
<CollapsibleCode>

```jsx 
%%-- File: guides/recipes/linear-gradient/rn-linear-gradient.tsx --%% 
```
</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
    </Tabs.TabPanel>
  </Tabs.TabPanels>
</Tabs>

## API Reference

To use this component in your project, include the following import statement in your file.

```jsx
import { LinearGradient } from '@/components/ui/linear-gradient';
```

```jsx
export default () => <LinearGradient />;
```
